<template>
  <div class="movie-scroll-component">
    <div class="title">
      <h2>{{ title }}</h2>
      <span>更多</span>
    </div>
    <div class="wrapper" ref="wrapper">
      <ul class="content" ref="content">
        <li v-for="(item, index) in data" :key="item.id" @click="getActiveMovie(item.id)">
          <img :src="item.images.small" alt="电影海报" />
          <div class="movie-info">
            <h3>{{ item.title }}</h3>
            <div>
              <img v-for="num in star[index][0]" src="./star-active.png" alt="" /><img v-for="(num, item) in star[index][1]" :key="item" src="./star.png" alt="">
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  props: {
    data: {
      type: Array
    },
    title: {
      type: String
    },
    star: {
      type: Array
    },
    scrollObj: {
      type: String
    }
  },
  data () {
    return {}
  },
  created () {},
  activated () {},
  mounted () {
    let children = this.$refs.content.children
    let width = 0
    for (let i = 0; i < children.length; i++) {
      width += children[i].offsetWidth
    }
    this.$refs.content.style.width = width + (5 * (children.length - 1)) + 'px'
    debugger
    this.newScroll()
    // if (this.scrollObj === 'wrapper0') {
    //   this.newScroll('wrapper0');
    // }
    // if (this.scrollObj === 'wrapper1') {
    //   this.newScroll('wrapper1');
    // }
    // if (this.scrollObj === 'wrapper2') {
    //   this.newScroll('wrapper2');
    // }
    // 获取滚动区域的宽度end
  },
  methods: {
    getActiveMovie (id) {
      let url = 'api/movie/subject/' + id
      // 获取电影详情
      this.$http(url)
        .then((res) => {
          this.$store.commit('getActiveMovie', res.data)
          this.$router.push({path: '/movie_detail'})
        })
        .catch((err) => {
          console.log(err)
        })
    },
    newScroll () {
      let wrapper = new BScroll(this.$refs.wrapper, {
        x: 0,
        scrollX: true,
        startX: -40, // (默认值:0) 表示X轴滚动的起始值  
        // startY: 0, // (默认值:0) 表示Y轴滚动的起始值
        click: true,
        doSome (event) {
          console.log(event)
        }
      })
      // wrapper.scrollTo(-40, 0, 1000) // 滚动结束后判断判断滚动位置
      wrapper.on('scrollEnd', (pos) => {
        console.log(pos)
        // if (pos.x === -40) { 
        //   return
        // }
        // if (pos.x === 0) {
        //   wrapper.scrollTo(-40, 0, 1000) // 滚动结束后判断判断滚动位置
        // }
      })
    }
  }
}
</script>

<style lang="less">
.movie-scroll-component .title {
  display: flex;
  h2 {
    flex: 1;
    margin: 0;
    font-size: 16px;
    font-weight: normal;
  }
  span {
    font-size: 16px;
    color: #00b600;
  }
}
.movie-scroll-component .wrapper {
  width: 100%;
  margin-top: 10px;
  overflow: hidden;
  ul {
    margin: 0;
    list-style: none;
    li + li {
      margin-left: 5px;
    }
    li {
      display: inline-block;
      img {
        width: 110px;
        height: 160px;
        border: 0;
      }
      .movie-info {
        text-align: center;
        h3 {
          width: 110px;
          margin: 0;
          font-size: 14px;
          font-weight: normal;
          text-align: center;
          // 文本溢出...
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        img {
          width: 14px;
          height: 14px;
          margin-right: 2px;
        }
      }
    }
  }
}
</style>
